<template>
  <el-card class="box-card">
    <el-table v-loading="loading" :data="records" border width="100%">
      <el-table-column type="index" align="center" label="序号" width="50" />
      <el-table-column prop="skuName" align="center" label="名称" />
      <el-table-column prop="skuDesc" align="center" label="描述" />
      <el-table-column
        v-slot="{ row }"
        align="center"
        label="默认图片"
        min-width="150"
      >
        <img class="sku-img" :src="row.skuDefaultImg" />
      </el-table-column>
      <el-table-column prop="weight" align="center" label="重量(KG)" />
      <el-table-column prop="price" align="center" label="价格(元)" />
      <el-table-column
        v-slot="{ row }"
        align="center"
        label="操作"
        min-width="300"
      >
        <el-button
          v-if="row.isSale === 1"
          type="success"
          icon="el-icon-top"
          size="mini"
          @click="handleCancelSave(row)"
        >
          上架
        </el-button>
        <el-button
          v-else
          type="info"
          icon="el-icon-bottom"
          size="mini"
          @click="handleOnSave(row)"
        >
          下架
        </el-button>
        <el-button type="warning" icon="el-icon-edit" size="mini">
          修改
        </el-button>
        <el-button
          type="danger"
          icon="el-icon-delete"
          size="mini"
          @click="handleDeleteSku(row.id)"
          >删除</el-button
        >
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <div class="footer">
      <el-pagination
        :current-page="page"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="limit"
        layout="prev, pager, next, jumper , total, sizes"
        :total="total"
        :hide-on-single-page="value"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </el-card>
</template>

<script>
export default {
  name: 'SkuList',
  data() {
    return {
      // 当前页码
      page: 1,
      // 每页条数
      limit: 10,
      // 控制分页器的显示隐藏
      value: false,
      // 是否显示加载中
      loading: false,
      // 总条数
      total: 1,
      // 响应列表总页数
      pages: '',
      // sku数据列表
      records: []
    }
  },
  watch: {
    // 返回数据中总页数发生变化时判断是否小于当前页数，若小于则再请求一次数据
    pages() {
      const { page, pages } = this
      if (page > pages) {
        this.page = pages
        this.getSkuList()
      }
    }
  },
  mounted() {
    this.getSkuList()
  },
  methods: {
    // 发送请求获取SKU列表
    async getSkuList() {
      this.loading = true
      const { page, limit } = this
      const { data } = await this.$API.sku.reqGetSkuList(page, limit)
      this.loading = false
      this.$message({ type: 'success', message: '获取数据成功' })
      const { records, total, pages } = data
      this.pages = pages
      this.records = records
      this.total = total
    },
    // 每页条数改变
    handleSizeChange(limit) {
      this.limit = limit
      this.getSkuList()
    },
    // 当前页码改变
    handleCurrentChange(page) {
      this.page = page
      this.getSkuList()
    },
    // 上架
    async handleCancelSave(row) {
      row.isSale = 0
      await this.$API.sku.reqCancelSale(row.id)
      this.$message({ type: 'success', message: '上架成功' })
    },
    // 下架
    async handleOnSave(row) {
      row.isSale = 1
      await this.$API.sku.reqOnSale(row.id)
      this.$message({ type: 'success', message: '下架成功' })
    },
    // 删除sku属性
    async handleDeleteSku(skuId) {
      await this.$API.sku.reqDeleteSku(skuId)
      this.getSkuList()
    }
  }
}
</script>

<style lang="scss" scoped>
.sku-img {
  width: 100px;
  height: 100px;
}
</style>
